import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TInputComponent extends Component {
  @tracked err = false;
  @tracked colorClass = 'border-gray-200 focus:border-blue-400 focus:ring-blue-300 dark:border-gray-600 dark:focus:border-blue-300';

  @action
  checkRequired(event) {
    const input = event.target;
    if (this.args.required && input.value.trim() === '') {
      this.err = true;
      this.colorClass = 'border-red-400 focus:border-red-400 focus:ring-red-300 dark:border-red-400 dark:focus:border-red-300';
    } else {
      this.err = false;
      this.colorClass = 'border-gray-200 focus:border-blue-400 focus:ring-blue-300 dark:border-gray-600 dark:focus:border-blue-300';
    }
  }
  
}